<template>
  <div class="vip">
    <div class="userInfo">
      <div class="userInfoTitle">
        <img
          :src="userInfo.mytouxiang"
          alt="头像"
        />
        <div>
          <p style="font-size:16px">{{userInfo.xingming}}</p>
          <p style="font-size:14px">等级：普通会员</p>
          <p style="font-size:14px">手机：{{userInfo.shouji}}</p>
        </div>
      </div>
      <!-- 订单 -->
      <van-cell title="我的订单" icon="description">
        <template #right-icon>
          <span style="color: orangered;" @click="toOrders(0)">全部订单</span>
        </template>
      </van-cell>
      <van-grid
        style="border-bottom:10px solid #f2f2f2"
        clickable
        :column-num="4"
      >
        <van-grid-item @click="toOrders(2)">
          <van-icon name="balance-pay" size="30" />
          <span style="font-size:14px">待付款</span>
        </van-grid-item>
        <van-grid-item @click="toOrders(3)">
          <van-icon name="underway-o" size="30" />
          <span style="font-size:14px">待发货</span>
        </van-grid-item>
        <van-grid-item @click="toOrders(4)">
          <van-icon name="logistics" size="30" />
          <span style="font-size:14px">待收货</span>
        </van-grid-item>
        <van-grid-item @click="toOrders(5)">
          <van-icon name="flower-o" size="30" />
          <span style="font-size:14px">待评价</span>
        </van-grid-item>
      </van-grid>

      <van-cell title="我的收藏" icon="like-o" is-link to="myFavorite"></van-cell>
      <van-cell title="地址管理" icon="location-o" is-link to="addressManage"></van-cell>
      <van-cell title="用户信息" icon="user-o" is-link to="userInfo"></van-cell>
      <van-cell title="密码修改" icon="edit" is-link to="changePwd"></van-cell>
      <van-cell
        title="退出登录"
        icon="exchange"
        is-link
        @click="loginOut"
      ></van-cell>
    </div>

    <!-- 底部导航 -->
    <PageTabs :childActive="3"></PageTabs>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
import PageTabs from "@/components/PageTabs";
export default {
  name: "vip",
  components: {
    PageTabs,
  },
  data() {
    return {
      userInfo:{},
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    toOrders(val) {
      this.$router.push({ path: "/orders", query: { type: val } });
    },
    // 获取用户信息
    getUserInfo() {
      SERVE.getUserInfo({
        params: {
          uid: window.localStorage.u_id,
        },
      })
        .then((res) => {
          this.userInfo = res.data
          console.log('resresres',res);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    loginOut() {
      this.$dialog.confirm({
          title: "提示",
          message: "是否退出当前账户？",
        })
        .then(() => {
          window.localStorage.removeItem("u_login");
          window.localStorage.removeItem("u_id");
          this.$router.push("/index");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.vip {
  .userInfo {
    height: calc(100vh - 50px);
    overflow-y: scroll;
    .userInfoTitle {
      height: 100px;
      width: 100%;
      background-color: #ff4500;
      padding: 0 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
      }
      & > div {
        width: calc(100% - 90px);
        display: flex;
        flex-direction: column;
        p {
          margin-bottom: 6px;
          color: #fff;
        }
      }
    }
  }
}
</style>
